<!DOCTYPE html>
<html>
    <head>
        <!-- Update title -->
        <title>Path2D Guide: Part 1</title>

        <!-- keywords used for searching -->
        <meta name="keywords" content="guide">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- reference to Cinder classes -->
        <!-- <ci seealso dox="[CLASS NAME GOES HERE]" label="[NAME OF LINK]"></ci> -->

        <!-- master stylesheet - these links will be replaced when compiled -->
        <link rel="stylesheet" href="../../_assets/css/foundation.css">
        <link rel="stylesheet" href="../../_assets/css/prism.css">
        <link rel="stylesheet" href="../../_assets/css/style.css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

        <!-- Place additional stylsheet links here, which will be copied over when compiled (optional) -->
        <link rel="stylesheet" href="path2d.css">
    </head>

    <body id="guide-contents" >    

        <!-- CONTENT STARTS HERE -->
        <div class="">
            <h1>Part 1: Path2D Basics</h1>
            
                <h2>Introduction</h2>
                <p>Cinder's Path2D API is one of Cinder's most powerful yet most underused utilities. This guide will walk through what a Path2D object is from the nuts and bolts and work through some of the more advanced functions. Each part has an interactive portion with code snippets that you can cut and paste into Cinder's draw function. You can use the templates and samples in <a href="#">this repo</a> to get started.
                </p>

                <h2>Points and Segments</h2>
                <p>A <ci dox="ci::Path2d">Path2D</ci> instance is constructed of points and <ci dox="cinder::Path2d::SegmentType">segments</ci>. A <strong>point</strong> refers to a 2D coordinate of where a line segment starts or ends as well as a coordinate of a handle that defines the curve of the path. A <strong>segment</strong> refers to the line segment as defined by the positions of the start/end points and handles. The <ci dox="ci::Path2d::SegmentType">types of segments</ci> are:</p>
                <ul>
                    <li><strong>MOVETO</strong>: Consists of a single point to start or continue your drawing from. Every path must start with a MOVETO segment.</li>
                    <li><strong>LINETO</strong>: Consists of a single point which contructs a line from the previous point</li>
                    <li><strong>QUADTO</strong>: A quadratic bezier curve consisting of 1 central handle point and 1 end point</li>
                    <li><strong>CUBICTO</strong>: A cubic bezier curve consisting of one handle point that controls the curve from the previous point and one handle point controlling the curve going into the given end point.</li>
                    <li><strong>CLOSE</strong>: A line created between the first and last points of a path.</li>
                </ul>
            

                <iframe seamless src="_tut_part1.html" id="tutorial"  width="100%" > </iframe>                    

                <div id="bottomNav">
                    <a href="part2.html">Part 2: Drawing Functions</a> &raquo;
                </div>

            </div>
                
        
        <!-- END CONTENT -->

        <!-- Scripts -->
        <!-- Place additional scripts here (optional) -->
        <script src="../../_assets/js/jquery.js" type="text/javascript"></script>
        <script src="iframeResizer.min.js" type="text/javascript"></script>
        
        <script type="text/javascript">
            iFrameResize({log:false});
        </script> 

    </body>
</html> 